Vue.component("tian-kong", {
	props: {
		'number': {
			type: Number,
			default: 0,
		},
		'ques': {
			type: Object,
			default: {}
		}
	},
	template: `
			<div>
				<div>{{number}}.{{ques.title}}</div>
				<ul>					
					<li v-for="(an, i) in ques.answer">
						<input type="text" class="answer" v-model="myAns[i]" :readonly="isDo">
					</li>
				</ul>
				<button class="sub" @click="result()" v-show="subShow">确定</button>
				<button class="sub" @click="redo()" v-show="reShow">重新答题</button>
				<div v-show="isDo">
					参考答案：{{ans.toString()}}
					<div class="explain">
						试题解析：{{ques.explain}}
					</div>
				</div>
			</div>`,
	data: function() {
		return {
			ans: [],
			myAns: [],
			isDo: false,
			subShow: true,
			reShow: false
		}
	},
	mounted() {
		this.ans = this.ques.answer;
	},
	methods: {
		result: function() {
			if (this.myAns.length > 0) {
				if (this.ans.toString() == this.myAns.toString()) {
					this.isDo = true;
					this.subShow = false;
					this.$emit('getans',{'id':this.ques.id, 'myAns':this.myAns});
				} else {
					this.isDo = true;
					this.subShow = false;
					this.reShow = true;
				}
			} else {
				alert('请作答');
			}
		},
		redo: function() {
			this.myAns = [];
			this.isDo = false;
			this.subShow = true;
			this.reShow = false;
		}
	}
})
